<template>
    <div id='' class="i-layout-page-header">
        <PageHeader @on-tab-change="config.events.onTabChange" @on-back="config.events.onBack" :back="config.props.back" :hidden-breadcrumb="config.props.hiddenBreadcrumb" :logo="config.props.logo" :title="config.props.title" :breadcrumb-list="config.props.breadcrumbList" :tab-list="config.props.tabList" :tab-active-key="config.props.tabActiveKey" :wide="config.props.wide">
            <div slot="action" v-if="config.props.action">
                <!-- 自定义操作区 -->
                <component :is="config.props.action.action" :data="config.props.action.data" :option="config.props.action.option" :event="config.props.action.event" />
            </div>
            <div slot="content">
                <!-- 自定义内容区域 -->
                {{content}}
                <component v-if="config.props.content.components" :is="config.props.content.components" :data="config.props.content.data" :option="config.props.content.option" />
            </div>
            <div slot="extra" v-if="config.props.extra">
                <!-- 自定义扩展展示区域 -->
                <component :is="config.props.extra.extra" :data="config.props.extra.data" :option="config.props.extra.option" />
            </div>
        </PageHeader>
    </div>
</template>
<script>
export default {
    name: '',
    props: ['config','content'],
    data() {
        return {
            // config: {}
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() { },
    methods: {},
    watch: {}
}
</script>
<style lang='less' scoped>
</style>